import React, { Component } from "react";
import { Text, View, TouchableOpacity, Alert } from "react-native";
import CustomHeader from "../../components/CustomHeader";
import { Input, Button, Image } from "react-native-elements";
import { request, vcodeImage } from "../../utils";
import AsyncStorage from "@react-native-community/async-storage";
import Toast from "react-native-root-toast";
import DeviceInfo from "react-native-device-info";
import { MyButton } from "../../components/MyButton";

export class Register extends Component {
  constructor(props) {
    super(props);
    this.state = {
      phone: "",
      email: "",
      password: "",
      password2: "",
      vcode: "",
      vcodeId: "",
      phoneError: "",
      emailError: ""
    };
  }
  componentDidMount() {
    this.getVCode();
  }

  getVCode = _ => {
    request("user/vcodeId", {}, vcodeId => this.setState({ vcodeId }));
  };
  submit = _ => {
    const { phone, email, password, vcode, vcodeId } = this.state;
    const { navigation } = this.props;
    request(
      "user/register",
      {
        phone,
        email,
        password,
        vcode,
        vcodeId,
        deviceId: DeviceInfo.getUniqueID()
      },
      data => {
        global.userInfo = data;
        AsyncStorage.setItem("Token", data.Token);
        Toast.show("注册成功");
        navigation.replace("Home");
      },
      data => Alert.alert("注册失败", data)
    );
  };
  checkPhone = _ => {
    const { phone } = this.state;
    request(
      "user/checkPhone",
      { phone },
      _ => this.setState({ phoneError: "" }),
      data => this.setState({ phoneError: data })
    );
  };
  checkEmail = _ => {
    const { email } = this.state;
    request(
      "user/checkEmail",
      { email },
      _ => this.setState({ emailError: "" }),
      data => this.setState({ emailError: data })
    );
  };
  render() {
    const {
      phone,
      password,
      password2,
      vcode,
      phoneError,
      emailError,
      vcodeId
    } = this.state;
    return (
      <View>
        <CustomHeader title="注册" />
        <Input
          placeholder="手机号"
          onChangeText={phone => {
            this.setState({ phone }, this.checkPhone);
          }}
          errorMessage={phoneError}
          keyboardType="phone-pad"
        />
        <Input
          placeholder="邮箱(非必填,找回密码用)"
          onChangeText={email => {
            this.setState({ email }, this.checkEmail);
          }}
          errorMessage={emailError}
          keyboardType="email-address"
        />
        <Input
          placeholder="密码(6-16位)"
          secureTextEntry={true}
          onChangeText={password => {
            this.setState({ password });
          }}
        />
        <Input
          placeholder="确认密码"
          secureTextEntry={true}
          onChangeText={password2 => {
            this.setState({ password2 });
          }}
          errorMessage={password != password2 ? "两次密码不同" : ""}
        />

        <View
          style={{
            display: "flex",
            flexDirection: "row"
          }}
        >
          <Input
            placeholder="验证码"
            containerStyle={{
              flex: 1
            }}
            onChangeText={vcode => this.setState({ vcode })}
          />
          <TouchableOpacity onPress={this.getVCode}>
            <Image
              source={{ uri: vcodeImage(vcodeId) }}
              style={{
                width: 100,
                height: 40,
                marginTop: 10,
                marginRight: 10
              }}
            />
          </TouchableOpacity>
        </View>

        <MyButton
          title="提交"
          containerStyle={{
            margin: 36
          }}
          disabled={!(phone && password && vcode)}
          onPress={this.submit}
        />
      </View>
    );
  }
}

export default Register;
